<template>
	<view>
		<Lines />
		<view class='list'>
			<!--左侧滑动-->
			<scroll-view scroll-y="true" class='list-left' :style="'height:'+clentHeight+'px;'">
				<view v-for='(item,index) in leftData' :key='index' @tap="changeLeftTab(index,item.id)">
					<view class='left-name' :class=' activeIndex ===index ?"left-name-active":"left-item" '>
						{{item.name}}</view>
				</view>
			</scroll-view>

			<!--右侧滑动-->
			<scroll-view scroll-y="true" class='list-right' :style="'height:'+clentHeight+'px;'">
				<view class='righ-list' v-for='(item,index) in rightData' :key='index'>
					<block v-for='(k,i) in item'>
						<view class='list-title'>{{k.name}}</view>
						<view class='right-content'>
							<view class='right-item' v-for='(j,idx) in k.list' :key='idx'>
								<image class='right-img' :src="j.imgUrl" mode="" @tap="goSearch(j.name)"></image>
								<view class='right-name'>{{j.name}}</view>
							</view>
						</view>
					</block>
				</view>

			</scroll-view>
		</view>
		<Tabbar cureentPage='list'></Tabbar>
	</view>
</template>

<script setup>
	import $http from '@/common/api/request.js'
	import Tabbar from '@/components/common/Tabbar.vue'
	import {
		onNavigationBarSearchInputClicked,
		onReady,
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref,
		reactive
	} from "vue"
	import Lines from '@/components/common/Line.vue'

	const clentHeight = ref(0)
	const activeIndex = ref(0)
	const leftData = ref([])
	const rightData = ref([])
	onLoad(() => {
		getData()
	})
	//获取可视高度
	onReady(() => {
		uni.getSystemInfo({
			success: (res) => {
				clentHeight.value = res.windowHeight
			}
		})
	})
	const getData = (id) => {
		if (id === (activeIndex.value + 1)) {
			return;
		}
		$http.request({
			url: "/goods/list"
		}).then((res) => {
			// console.log(res);
			let leftDatas = []
			let rightDatas = []
			res.forEach(v => {
				leftDatas.push({
					id: v.id,
					name: v.name
				})
				//如果点击的id值相同
				if (v.id === (activeIndex.value + 1)) {
					rightDatas.push(v.data);
				}
			})
			leftData.value = leftDatas
			rightData.value = rightDatas
		}).catch(() => {
			uni.showToast({
				title: "请求失败",
				icon: "error"
			})
		})
	}
	// 左侧点击事件
	const changeLeftTab = (index, id) => {
		getData(id)
		activeIndex.value = index
		
	}
	const getClientHeight = () => {
		const res = uni.getSystemInfoSync();
		const system = res.platform;
		if (system === 'ios') {
			return 44 + res.statusBarHeight;
		} else if (system === 'android') {
			return 48 + res.statusBarHeight;
		} else {
			return 0;
		}
	}
	onNavigationBarSearchInputClicked(() => {
		uni.navigateTo({
			url: '../search/search'
		})
	})
	// 点击图片进行跳转
	const goSearch=(index)=>{
		uni.navigateTo({
			url:'../../pages/search-list/search-list?a='+index+''
		})
	}
</script>

<style>
	.list {
		display: flex;
	}

	.list-left {
		width: 200rpx;
	}

	.left-item {
		border-bottom: 2rpx solid #FFFFFF;
		font-size: 28rpx;
		font-weight: bold;
		background-color: #F7F7F7;
	}

	.left-name {
		padding: 30rpx 6rpx;
		text-align: center;
	}

	.left-name-active {
		border-left: 8rpx solid #49BDFB;
		background-color: #FFFFFF;
	}

	.list-right {
		flex: 1;
		padding-left: 30rpx;
	}

	.list-title {
		font-weight: bold;
		padding: 30rpx 0;
	}

	.right-content {
		display: flex;
		flex-wrap: wrap;
	}

	.right-item {
		width: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10rpx;
	}

	.right-name {
		padding: 16rpx 0;
	}

	.right-img {
		width: 150rpx;
		height: 150rpx;
	}
</style>
